<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            background-color: pink;
            width:220px;
            /* height: 100px; */
            overflow:hidden;
            transition: all 0.5s;
        }
        .h100 {
            height:100px;
        }
        .h500 {
            height: 500px;
        }
    </style>
</head>
<body>
    <div class="box h100">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio nam, voluptates necessitatibus et dignissimos dolorum fugiat debitis recusandae quod quibusdam doloribus labore repellat quia illum earum laudantium tenetur? Corrupti, eos.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio nam, voluptates necessitatibus et dignissimos dolorum fugiat debitis recusandae quod quibusdam doloribus labore repellat quia illum earum laudantium tenetur? Corrupti, eos.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio nam, voluptates necessitatibus et dignissimos dolorum fugiat debitis recusandae quod quibusdam doloribus labore repellat quia illum earum laudantium tenetur? Corrupti, eos.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio nam, voluptates necessitatibus et dignissimos dolorum fugiat debitis recusandae quod quibusdam doloribus labore repellat quia illum earum laudantium tenetur? Corrupti, eos.
    </div>
    <button onClick='listall()'>展开</button>
    <script>
        const box = document.querySelector('.box');
        const listall = () => {
            box.classList.remove('h100');
            box.classList.add('h500');
        }
        // setTimeout(()=> {
            
        // },2000)
        
    </script>
</body>
</html>